<template>
  <view class="add-contanier">
    <view class="info">
      <view class="title">姓名:</view>
      <input class="uni-input" placeholder="请填写观演人姓名" v-model="addedSpectator.spectatorName"/>
    </view>
    <view class="info">
      <view class="title">证件类型:</view>
      <picker
          @change="bindPickerChange"
          v-model="index"
          :range="array"
          range-key="name"
          style="font-size: 16px"
      >
        <view style="padding: 20rpx; background-color: white; color: black"
        >{{ array[addedSpectator.certificateType].name }} ∨
        </view
        >
      </picker>
    </view>
    <view class="info">
      <view class="title">证件号码:</view>
      <input class="uni-input" v-model="addedSpectator.certificateNumber" type="idcard" placeholder="请填写证件号码"/>
    </view>
    <view class="info">
      <view class="title">手机号码:</view>
      <input class="uni-input" v-model="addedSpectator.spectatorPhoneNumber" type="phone" placeholder="请填写手机号码"/>
    </view>
    <view class="confirmBox">
      <view class="confirmBtn" @click="submitSpectator"> {{
          addedSpectator.spectatorId ? '确认修改' : '确认添加'
        }}
      </view>
    </view>
  </view>
</template>

<script>
import {addSpectator, getSpectatorInfo, updateSpectator} from "../../api/user/spectator";

export default {
  data() {
    return {
      addedSpectator: {
        certificateType: 0,
      },
      array: [
        {name: "身份证"},
        {name: "港澳台居民居住证"},
        {name: "港澳居民来往内地通行证"},
        {name: "台湾居民来往大陆通行证"},
        {name: "护照"},
        {name: "外国人永久居留身份证"},
      ],
    };
  },
  onShow() {
    let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    let curParam = routes[routes.length - 1].options; //获取路由参数
    if (curParam.spectatorId !== undefined) {
      getSpectatorInfo(curParam.spectatorId).then(res => {
        this.addedSpectator = res.data;
      })
    }
  },
  methods: {
    bindPickerChange: function (e) {
      this.addedSpectator.certificateType = e.detail.value;
    },
    submitSpectator() {
      if (this.addedSpectator.spectatorId) {
        updateSpectator(this.addedSpectator).then(res => {
          if (res.success) {
            uni.navigateBack();
          } else {
            uni.showToast({
              title: res.message,
              icon: 'error'
            })
          }
        })
        return;
      }
      addSpectator(this.addedSpectator).then(res => {
        if (res.success) {
          uni.navigateBack();
        } else {
          uni.showToast({
            title: res.message,
            icon: 'error'
          })
        }
      })
    }
  },
};
</script>

<style lang="scss">
.add-contanier {
  width: 100%;
  height: 100vh;
  background-color: white;
}

.info {
  padding: 0px 15px;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  font-size: 16px;
  border-bottom: 1px solid #f5f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .uni-input {
    width: 60%;
    text-align: right;
    height: 38px;
  }
}

.confirmBox {
  position: fixed;
  display: flex;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: 130upx;
  background-color: #ffffff;
  align-items: center;
  justify-content: center;

  .confirmBtn {
    margin-bottom: 10px;
    height: 70%;
    width: 80%;
    background-color: #ff0000;
    text-align: center;
    color: white;
    border-radius: 40px;
    line-height: 90upx;
  }
}
</style>
